<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>跳动的心</title>
		<style type="text/css">
	 		body{
	 			padding: 0;
	 			margin: 0;
	 		}
	 		.box{
	 			width: 300px;
	 			height: 300px;
	 			
	 			margin:200px auto;
	 			position: relative;
	 		}
	 		span{
	 			width: 178px;
	 			height: 178px;
	 			background-color: lightpink;
	 			border-radius:90px ;
	 			position: absolute;
	 			animation: move 1s linear infinite;
	 		}
	 		.right{
	 			right: 0;
	 		}
	 		.center{
	 			top: 62px;
	 			left: 60px;
	 			border-radius: 0 0 20px 0;
	 			
	 			transform: rotate(45deg);
	 		}
	 		@keyframes move{
	 			0%{
	 				transform: rotate(45deg) scale(1);
	 				box-shadow:0 0 20px lightpink;
	 			}
	 			50%{
	 				transform:rotate(45deg) scale(1.2);
	 				box-shadow:0 0 40px lightpink;
	 			}
	 			100%{
	 				transform:rotate(45deg) scale(1);
	 				box-shadow:0 0 20px lightpink;
	 			}
	 		}
	 	</style>	
	</head>
	<body>
		<div class="box">
			<span class="left" style="color: hotpink;font-size: 25px;">哈哈哈</span>
			<span class="right" style="color: hotpink;font-size: 25px;">么么哒</span>
			<span class="center"></span>
		</div>
	</body>
</html>
